<template>
  <!-- 项目经营-支出新增 4-6 -->
  <div class="common-wrap">
    <h3>开票到账信息</h3>
    <a-form :form="form">
      <a-form-item label="项目编号" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入编号" v-decorator="[
          '编号',
          {rules: [{ required: true, message: '请输入编号' }]}
        ]" />
      </a-form-item>
      <a-form-item label="编号" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入编号" />
      </a-form-item>
      <a-form-item label="日期" :label-col="{ span: 2 }">
        <a-date-picker size="large" placeholder="请选择日期" :showToday="false" />
      </a-form-item>
      <a-form-item label="支出类型" :label-col="{ span: 2 }">
        <a-checkbox-group>
          <a-row>
            <a-col :span="10">
              <a-checkbox value="A">招标费</a-checkbox>
            </a-col>
            <a-col :span="10">
              <a-checkbox value="B">人力成本</a-checkbox>
            </a-col>
            <a-col :span="10">
              <a-checkbox value="C">差旅费</a-checkbox>
            </a-col>
            <a-col :span="10">
              <a-checkbox value="D">招待费</a-checkbox>
            </a-col>
            <a-col :span="10">
              <a-checkbox value="E">外协费</a-checkbox>
            </a-col>
            <a-col :span="10">
              <a-checkbox value="F">其他</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>

      <a-form-item label="内容" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入内容" />
      </a-form-item>
      <a-form-item label="金额" :label-col="{ span: 2 }">
        <a-date-picker size="large" placeholder="请选择金额" :showToday="false" style="width:293px" />
      </a-form-item>
      <a-form-item label="相关人" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入相关人" />
      </a-form-item>
      <a-form-item label="备注" :label-col="{ span: 2 }">
        <a-input size="large" placeholder="请输入备注" />
      </a-form-item>
      <a-form-item>
        <div class="sumbitButton">
          <a-button type="primary" class="buttonColorGreen" size="large">提交</a-button>
          <a-button class="buttonColorWhite" size="large">取消</a-button>
        </div>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this)
    }
  }
}
</script>

<style>
h3 {
  margin-bottom: 25px;
}
.ant-input {
  width: 300px;
}
.sumbitButton {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}
.sumbitButton button {
  margin: 20px 30px;
}
.ant-checkbox-group{
  margin-top: 10px;
  margin-bottom: -20px;
}
.ant-checkbox-wrapper{
  margin-bottom: 10px;
}
</style>

